<template>
  <div class="inspector-home">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <div class="left">
        <span>下午好，{{userInfo.name}}！</span>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stat-cards">
      <el-card class="stat-card">
        <div class="stat-title">今日待测总数</div>
        <div class="stat-value primary">10</div>
        <div class="stat-footer">
          <el-tag size="small" type="success">同比 +10%</el-tag>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-title">本月已检总数</div>
        <div class="stat-value secondary">150</div>
        <div class="stat-footer">
          <span class="comparison">环比 +5.2%</span>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-title">紧急任务</div>
        <div class="stat-value danger">2</div>
        <div class="stat-footer">
          <span class="comparison">较昨日 +1</span>
        </div>
      </el-card>
    </div>

    <!-- 抽检分片区域 -->
    <div class="inspection-cards">
      <el-row :gutter="20">
        <!-- 原材料抽检 -->
        <el-col :span="8">
          <el-card class="inspection-card" @click="navigateToRawMaterial" style="cursor: pointer;">
            <div class="inspection-header">
              <div class="inspection-title">原材料抽检</div>
              <div class="header-right">
                <span class="pending-count">待检数: {{ getPendingCount(rawMaterialData) }}</span>
                <el-tag type="primary" effect="plain">进行中</el-tag>
              </div>
            </div>
            <div class="inspection-content">
              <div class="inspection-list scrollable">
                <div v-for="item in rawMaterialData" :key="item.systemNumber" class="inspection-item">
                  <div class="item-info">
                    <span class="material-type">{{ item.materialType }}</span>
                    <span class="system-number">{{ item.systemNumber }}</span>
                  </div>
                  <div class="item-progress">
                    <el-progress 
                      :percentage="getProgress(item.inspectionStatus)" 
                      :color="getProgressColor(item.inspectionStatus)" 
                      :show-text="false" 
                      size="small"
                    />
                    <span class="progress-text" :style="{ color: getResultColor(item.inspectionResult) }">{{ getResultText(item.inspectionResult) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 半成品抽检 -->
        <el-col :span="8">
          <el-card class="inspection-card" @click="navigateToSemiFinished" style="cursor: pointer;">
            <div class="inspection-header">
              <div class="inspection-title">半成品抽检</div>
              <div class="header-right">
                <span class="pending-count">待检数: {{ getPendingCount(semiFinishedData) }}</span>
                <el-tag type="primary" effect="plain">进行中</el-tag>
              </div>
            </div>
            <div class="inspection-content">
              <div class="inspection-list scrollable">
                <div v-for="item in semiFinishedData" :key="item.systemNumber" class="inspection-item">
                  <div class="item-info">
                    <span class="quality-area">{{ item.productType }}</span>
                    <span class="system-number">{{ item.systemNumber }}</span>
                  </div>
                  <div class="item-progress">
                    <el-progress 
                      :percentage="getProgress(item.inspectionStatus)" 
                      :color="getProgressColor(item.inspectionStatus)" 
                      :show-text="false" 
                      size="small"
                    />
                    <span class="progress-text" :style="{ color: getResultColor(item.inspectionResult) }">{{ getResultText(item.inspectionResult) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 成品抽检 -->
        <el-col :span="8">
          <el-card class="inspection-card" @click="navigateToFinished" style="cursor: pointer;">
            <div class="inspection-header">
              <div class="inspection-title">成品抽检</div>
              <div class="header-right">
                <span class="pending-count">待检数: {{ getPendingCount(finishedData) }}</span>
                <el-tag type="primary" effect="plain">进行中</el-tag>
              </div>
            </div>
            <div class="inspection-content">
              <div class="inspection-list scrollable">
                <div v-for="item in finishedData" :key="item.systemNumber" class="inspection-item">
                  <div class="item-info">
                    <span class="quality-area">{{ item.productType }}</span>
                    <span class="system-number">{{ item.systemNumber }}</span>
                  </div>
                  <div class="item-progress">
                    <el-progress 
                      :percentage="getProgress(item.inspectionStatus)" 
                      :color="getProgressColor(item.inspectionStatus)" 
                      :show-text="false" 
                      size="small"
                    />
                    <span class="progress-text" :style="{ color: getResultColor(item.inspectionResult) }">{{ getResultText(item.inspectionResult) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { userInfoStore } from '@/stores/userInfo';
const userInfo = userInfoStore();
// 路由实例
const router = useRouter()

// 原材料抽检数据 - 增加更多数据用于演示滚动
const rawMaterialData = ref([
  {
    systemNumber: 'SYS001',
    materialType: 'LED芯片',
    inspectionStatus: '质检完成',
    inspectionResult: '合格'
  },
  {
    systemNumber: 'SYS002',
    materialType: '荧光粉',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  },
  {
    systemNumber: 'SYS003',
    materialType: '封装胶',
    inspectionStatus: '质检完成',
    inspectionResult: '合格'
  },
  {
    systemNumber: 'SYS004',
    materialType: '支架',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  },
  {
    systemNumber: 'SYS012',
    materialType: '封装胶',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  }
])

// 半成品抽检数据 - 增加更多数据
const semiFinishedData = ref([
  {
    systemNumber: 'SYS005',
    productType: '固晶',
    inspectionStatus: '质检完成',
    inspectionResult: '合格'
  },
  {
    systemNumber: 'SYS006',
    productType: '焊线',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  },
  {
    systemNumber: 'SYS007',
    productType: '点胶',
    inspectionStatus: '质检完成',
    inspectionResult: '不合格'
  },
  {
    systemNumber: 'SYS013',
    productType: '封装',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  },
  {
    systemNumber: 'SYS014',
    productType: '焊线',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  }
])

// 成品抽检数据 - 增加更多数据
const finishedData = ref([
  {
    systemNumber: 'SYS009',
    productType: 'LED灯泡',
    inspectionStatus: '质检完成',
    inspectionResult: '合格'
  },
  {
    systemNumber: 'SYS010',
    productType: 'LED灯管',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  },
  {
    systemNumber: 'SYS011',
    productType: 'LED面板灯',
    inspectionStatus: '质检完成',
    inspectionResult: '合格'
  },
  {
    systemNumber: 'SYS015',
    productType: 'LED射灯',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  },
  {
    systemNumber: 'SYS016',
    productType: 'LED筒灯',
    inspectionStatus: '质检未完成',
    inspectionResult: '检测中'
  }
])

// 路由跳转函数 - 保存当前页面状态
const navigateToRawMaterial = () => {
  // 保存当前页面到历史记录
  router.push({
    path: '/inspector/raw-material-standard',
    query: { from: 'home' }
  })
}

const navigateToSemiFinished = () => {
  router.push({
    path: '/inspector/semi-finished-standard',
    query: { from: 'home' }
  })
}

const navigateToFinished = () => {
  router.push({
    path: '/inspector/finished-standard',
    query: { from: 'home' }
  })
}

// 获取进度百分比
const getProgress = (status: string) => {
  return status === '质检完成' ? 100 : 60
}

// 获取进度条颜色
const getProgressColor = (status: string) => {
  return status === '质检完成' ? '#4cd964' : '#094fd2'
}

// 获取检测结果文本和颜色
const getResultText = (result: string) => {
  return result
}

const getResultColor = (result: string) => {
  switch (result) {
    case '合格':
      return '#67c23a'
    case '不合格':
      return '#f56c6c'
    case '检测中':
      return '#409eff'
    default:
      return '#909399'
  }
}

// 获取待检数量
const getPendingCount = (data: any[]) => {
  return data.filter(item => item.inspectionStatus === '质检未完成').length
}

// 页面加载时的逻辑
onMounted(() => {
  console.log('质检员首页加载完成')
})
</script>

<style lang="scss" scoped>
.inspector-home {
  padding: 0;
  background: #f5f5f5; /* 恢复原来的背景颜色 */
  min-height: 100vh;

  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    .left {
      font-size: 16px;
      font-weight: bold;
      color: white;
    }    
  }

  .stat-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    
    .stat-card {
      flex: 1;
      background: white; /* 恢复白色背景 */
      border: 1px solid #e0e0e0;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 简化阴影 */
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      }
      
      .stat-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
      }
      
      .stat-value {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 10px;
        
        &.primary {
          color: #409eff;
        }
        
        &.secondary {
          color: #67c23a;
        }
        
        &.danger {
          color: #f56c6c;
        }
      }
      
      .stat-footer {
        font-size: 12px;
        
        .comparison {
          color: #999;
        }
      }
    }
  }

  .inspection-cards {
    .inspection-card {
      margin-bottom: 10px;
      border-radius: 16px;
      background: white; /* 恢复白色背景 */
      border: 1px solid #e0e0e0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 简化阴影 */
      transition: all 0.3s ease;
      
      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }
      
      &:nth-child(1) {
        border-left: 4px solid #409eff;
      }
      
      &:nth-child(2) {
        border-left: 4px solid #67c23a;
      }
      
      &:nth-child(3) {
        border-left: 4px solid #f56c6c;
      }
      
      .inspection-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        
        .inspection-title {
          font-size: 16px;
          font-weight: bold;
          color: #2c3e50;
        }
        
        .header-right {
          display: flex;
          align-items: center;
          gap: 10px;
          
          .pending-count {
            font-size: 12px;
            color: #409eff;
            background: #f0f9ff;
            padding: 6px 12px;
            border-radius: 20px;
            border: 1px solid #d4edda;
            font-weight: 500;
          }
        }
      }
      
      .inspection-content {
        .inspection-list {
          &.scrollable {
            max-height: 200px;
            overflow-y: auto;
            padding-right: 8px;
            margin-right: -8px;
            
            &::-webkit-scrollbar {
              width: 6px;
            }
            
            &::-webkit-scrollbar-track {
              background: #f1f1f1;
              border-radius: 6px;
            }
            
            &::-webkit-scrollbar-thumb {
              background: #c1c1c1;
              border-radius: 6px;
              
              &:hover {
                background: #a8a8a8;
              }
            }
          }
          
          .inspection-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 16px 12px;
            border-bottom: 1px solid #f0f0f0;
            border-radius: 12px;
            background: #fafafa;
            transition: all 0.3s ease;
            
            &:hover {
              background: #f5f5f5;
              transform: translateX(5px);
            }
            
            &:last-child {
              border-bottom: none;
              margin-bottom: 8px;
            }
            
            .item-info {
              display: flex;
              flex-direction: column;
              
              .material-type,
              .quality-area {
                font-size: 14px;
                font-weight: 600;
                color: #2c3e50;
                margin-bottom: 4px;
              }
              
              .system-number {
                font-size: 12px;
                color: #7f8c8d;
                font-weight: 500;
              }
            }
            
            .item-progress {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              min-width: 80px;
              margin-right: 12px;
              
              .progress-text {
                font-size: 12px;
                margin-top: 6px;
                padding: 4px 8px;
                border-radius: 12px;
                font-weight: 600;
                color: white;
                
                /* 根据检测结果设置不同的背景颜色 */
                &[style*="#67c23a"] {
                  background: #67c23a;
                }
                
                &[style*="#f56c6c"] {
                  background: #f56c6c;
                }
                
                &[style*="#409eff"] {
                  background: #409eff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>